<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <span>名字：</span>
        <input @mouseleave="f1()" v-model="name" type="text">
        <span style="color: red" v-if="n1flag">{{test.n1}}</span>
    </div>
    <br>
    <div>
        <span>姓氏：</span>
        <input @mouseleave="f2()" v-model="name2" type="text">
        <span  v-if="n2flag"  style="color: red">{{test.n2}}</span>
    </div>
    <br>
    <div>
        <span>登录名：</span>
        <input v-model="loginName" type="text">
    </div>
    <br>

    <div>
        <span>密码：</span>
        <input @mouseleave="f3()" v-model="password" type="password">
        <span  v-if="n3flag" style="color: red">{{test.n3}}</span>
    </div>
    <br>

    <div>
        <span>再次输入密码：</span>
        <input @mouseleave="f4()" v-model="password2" type="password">
        <span  v-if="n4flag"  style="color: red">{{test.n4}}</span>

    </div>
    <br>

    <div>
        <span>电子邮箱：</span>
        <input @mouseleave="f5()" v-model="email" type="email">
        <span  v-if="n5flag"  style="color: red">{{test.n5}}</span>
    </div>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            name2: '',
            loginName:'',
            password: '',
            password2: '',
            email: '',
            test: {
                n1: '名字中不能包含数字',
                n2: '姓氏不能为空',
                n3: '密码必须等于或大于6个字符',
                n4: '两次输入的密码不一致',
                n5: 'Email格式不正确，必须包含@'
            },
            n1flag: false,
            n2flag: false,
            n3flag: false,
            n4flag: false,
            n5flag: false,
        },
        methods: {
            f1() {
                var reg = new RegExp("^\\D*$");
                if (!reg.test(this.name)){
                    this.n1flag = true
                }else {
                    this.n1flag = false
                }
            },
            f2() {
                if (this.name2 == null || this.name2 == ''){
                    this.n2flag = true
                }else {
                    this.n2flag = false
                }
            },
            f3() {
                var reg = new RegExp("^[a-z0-9_-]{6,18}$")
                if (!reg.test(this.password)){
                    this.n3flag = true
                }else {
                    this.n3flag = false
                }
            },
            f4(){
                if (this.password === this.password2){
                    this.n4flag = false
                }else {
                    this.n4flag = true
                }
            },
            f5(){
                var reg = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+$")
                if (!reg.test(this.email)){
                    this.n5flag = true
                }else {
                    this.n5flag = false
                }
            }
        }
    })
</script>
</body>
</html>
